<template>
  <Back />
  <div class="bg-#fafafa">
    <van-image width="100%" height="300px" :src="prize.icon" fit="contain" />
    <div class="title">
      {{ prize.title }}
    </div>
    <div class="options">
      <div>{{ $t('prize.active') }}{{ prize.winners }}</div>
      <div>{{ $t('prize.people') }}{{ prize.participants }}</div>
      <div>{{ $t('prize.startTime') }}{{ prize.startTime }}</div>
      <div>{{ $t('prize.endTime') }}{{ prize.endTime }}</div>
      <div v-if="prize.record">
        {{ $t('prize.result') }}<span :class="{ red: result == $t('prize.resultWin') }">{{ result }}</span>
      </div>
    </div>

    <div class="intro">
      <p>{{ t('prize.intro') }}</p>
      <div>
        {{ prize.detail }}
      </div>
      <div v-if="prize.intro">
        <van-image width="100%" :src="prize.intro" fit="contain" />
      </div>
    </div>

    <div class="foot">
      <van-button :loading="store.loading" :disabled="disbleButton" type="primary" block @click="partake">{{ buttonText }}</van-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import dayjs from 'dayjs'

const { t } = useI18n()
const route = useRoute()
const store = useAppStore()
const id = route.query.id

const prize = ref<ApiPrizeVO>({} as ApiPrizeVO)

onMounted(() => {
  apis.api.userPrizeDetail({ id: id }).then(data => (prize.value = data))
})

const disbleButton = computed(() => {
  return buttonText.value !== t('prize.join')
})

const buttonText = computed(() => {
  if (!prize.value || !prize.value.id) {
    return ''
  }

  const now = dayjs()
  const start = dayjs(prize.value.startTime)
  const end = dayjs(prize.value.endTime)

  if (now.isAfter(end) || now.isBefore(start)) {
    return t('prize.end')
  }

  if (prize.value.record) {
    t('prize.hold')
  }
  return t('prize.join')
})

const result = computed(() => {
  if (prize.value.status == 2) {
    if (prize.value.record && prize.value.record.win) {
      return t('prize.resultWin')
    } else {
      return t('prize.resultFail')
    }
  }
  return t('prize.resultWait')
})

const partake = () => {
  if (prize.value && prize.value.id) {
    apis.api.userPrizePartake({ id: prize.value.id }).then(d => {
      showDialog({ message: t('prize.joinOK') })
      prize.value.record = { win: false } as ApiPrizeRecord
    })
  }
}
</script>
<style lang="scss" scoped>
.title {
  font-size: 1.8rem;
  padding: 0 16px;
  line-height: 50px;
  border-bottom: 1px solid #dcdcdc;
  background-color: #fff;
}
.options {
  padding: 16px;
  background-color: #fff;
  div {
    font-size: 1.4rem;
    margin-bottom: 6px;
  }
}
.intro {
  margin-top: 1.2rem;
  background-color: #fff;
  padding-bottom: 110px;
  p {
    padding: 0 16px;
    margin: 0;
    font-size: 1.4rem;
    line-height: 3.6rem;
    border-bottom: 1px solid #dcdcdc;
  }
  div {
    padding: 16px;
    color: #666;
    font-size: 1.4rem;
  }
}

.action {
  position: fixed;
  bottom: 0;
  width: 100vw;
  background-color: #fff;
  border-top: 1px solid #dcdcdc;
  padding: 12px;
  box-sizing: border-box;
}
.foot {
  position: fixed;
  bottom: 0;
  width: 100%;
}
.red {
  color: #f00;
}
</style>
